/**
 * ArronYR <yangyun4814@gmail.com>
 * 2018/01/08
 */

html {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 14px;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    background: white url('../images/bg.png') no-repeat;
    background-size: 100% 100%;
    color: white;
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 12px;
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 14px;
    }
}

@media screen and (min-width: 3840px) {
    html {
        font-size: 16px;
    }
}

.section-01,
.section-02,
.section-03 {
    position: relative;
    width: 33.3333%;
    height: inherit;
    float: left;
}


/* section-01 */

.section-01 {
    overflow: hidden;
}

#area1 {
    position: relative;
    width: 100%;
    color: #24b4e4;
    padding-top: 1rem;
}

.app-logo {
    display: inline-block;
    vertical-align: middle;
}

.app-logo-img {
    width: 6.8rem;
}

.app-title {
    display: inline-block;
    vertical-align: middle;
}

.main-title {
    font-family: Trebuchet MS, Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    color: #24b4e4;
    font-size: 2rem;
}

#area4 {
    position: relative;
    width: 100%;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
}

#area4 .current-date {
    font-size: 1.4rem;
    color: #fff;
    margin-top: 1rem;
    margin-bottom: 0;
}

#area4 .reader {
    border-bottom: 1px solid #ffffff;
    font-size: 2rem;
    color: #fff;
    margin: 10px 0 10px;
}

.reader span {
    color: #df3909;
    font-size: 3rem;
    font-family: "Times New Roman", Georgia, Serif;
}

.progress_define {
    background: #30f253;
    border-radius: 10px;
    overflow: hidden
}

.progress {
    background: none;
    margin-bottom: 10px;
    height: 10px;
}

.users1 {
    color: white;
}

.users1 p {
    font-size: 1.2rem;
    float: left;
}

.users1 span {
    font-size: 1.2rem;
    float: right;
}

#area7 {
    position: relative;
    width: 100%;
    padding: 0 0 0 20px;
    box-sizing: border-box;
}

.guide-header {
    font-size: 1.8rem;
}

.guide-content {
    font-size: 0.91rem;
}


/* section-02 */

#area2 {
    position: relative;
    width: 100%;
}

.area2-content {
    margin-right: 0;
}

.area2-head {
    font-size: 1.6rem;
    margin-top: 10px;
    margin-bottom: 0;
}

.area2-number {
    background: -webkit-linear-gradient(top, red 49%, #ffb7b7 2%, red);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 2rem;
    margin-top: 10px;
}

#area5 {
    position: relative;
    width: 100%;
    height: 33%;
}

#entrance {
    width: 100%;
    height: 100%;
    border: 0px solid yellow;
    padding: 0 1rem 0;
}

#area8 {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.area8-top-icon-wrapper {
    background-image: url('../images/borrow_bg.png');
    background-repeat: no-repeat;
    background-size: 8rem 8rem;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

.area8-top-text-wrapper {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.count-return {
    font-size: 18px;
    color: #D9D762;
    font-weight: 600;
    color: rgba(255, 102, 51, 1)
}

.area8-center-head {
    font-size: 1.4rem;
    margin-top: 10px;
    margin-bottom: 0;
}

.area8-row {
    margin-left: 0;
    margin-right: 0;
}

.area8-center-count {
    background-image: url(../images/smallborrow_bg1.png);
    background-repeat: no-repeat;
    background-size: 10rem 4rem;
    background-position: center;
    line-height: 4rem;
    font-size: 2rem;
    color: #fff;
    margin-top: 10px;
}

.area8-bottom-head {
    color: #acff48;
    font-size: 1rem;
    margin-top: 0;
}

.area8-bottom-count {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 3rem;
    color: #acff48;
    margin-top: 0;
}


/* section-03 */

#area3 {
    position: relative;
    width: 100%;
    height: 30%;
}

.area3-head {
    width: 30px;
    float: left;
    font-size: 1.8rem;
}

.area3-content {
    width: 90%;
    float: left;
    height: 100%;
    border: 0px solid yellow;
}

#area6 {
    position: relative;
    width: 100%;
    height: 30%;
}

.area6-head {
    font-size: 1.8rem;
}

#area9 {
    position: relative;
    width: 100%;
    height: 33%;
}

.area9-head {
    font-size: 1.8rem;
}

.area9-content {
    position: relative;
    width: 100%;
    height: 80%;
}

#area9-1,
#area9-2,
#area9-3,
#area9-4 {
    left: 0;
    top: 0;
    padding-left: 10px;
    width: 100%;
    height: 100%;
    border: 0px solid blue;
    position: absolute;
}

.area9-image {
    float: left;
    width: 40%;
    height: 100%;
    padding-right: 20px;
    box-sizing: border-box;
}

.area9-image img {
    width: 100%;
    height: 100%;
}

.area9-desc {
    float: left;
    width: 60%;
    padding: 0 20px 0 0;
}

.area9-desc-text {
    display: inline-block;
    font-size: 1rem;
    color: white
}


/* ========================== */

.row {
    margin-top: 5px;
}

.alignCenter {
    text-align: center;
}

.redColor {
    color: red;
}

.whiteColor {
    color: white;
}

.bookcirculation {
    font-family: Impact, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
}

.intro {
    font-family: "STKaiti", "华文楷体", "宋体", sans-serif;
    font-size: 23px;
    margin-left: 30px;
    margin-right: 30px;
    position: absolute;
    top: 20px;
    text-indent: 2em;
}

.tinyno {
    font-family: 'Trebuchet MS', Helvetica, 'Microsoft Yahei', '微软雅黑', sans-serif;
    font-size: 25px;
    text-align: right;
    color: transparent;
    background-color: white;
    /*text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;*/
    background-clip: text;
    -webkit-background-clip: text;
}

.hugeno {
    font-family: Impact, Helvetica, '方正舒体', '方正兰亭纤黑简体', '微软雅黑', sans-serif;
    font-size: 35px;
    color: white;
}

.hugeNum {
    font-size: 70px;
    font-family: Georgia;
    color: rgba(255, 102, 51, 1);
    text-shadow: 0 0 40px #5969a5, 0 0 70px #5969a5;
}